<template>
	<div class="nav-wrapper">
		<div
			class="menu"
			:class="{ active: index === currentIndex }"
			v-for="(item, index) in menu"
			:key="index"
			@click="handleClick(index)"
		>
			{{ item }}
		</div>
	</div>
</template>

<script>
export default {
	props: {
		menu: {
			type: Array,
			default: () => []
		},
		// 选中的下标
		defaultActive: {
			type: Number,
			default: 0
		}
	},
	created() {
		this.currentIndex = this.defaultActive
	},
	data() {
		return {
			currentIndex: 0
		}
	},
	methods: {
		handleClick(index) {
			this.currentIndex = index
			this.$emit('itemClick', index)
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.nav-wrapper {
	display: flex;
	.active {
		color: #007fff;
	}
	.menu {
		cursor: pointer;
		height: 60px;
		margin: 0 18px;
		font-size: 18px;
		line-height: 60px;
		transition: all 0.3s;
		&:hover {
			color: #007fff;
		}
	}
}
</style>
